<template>
  <view class="hvn">
    <SimpleControl :control="(control as BaseController.Control)" :show-share-icon="false" hide-offline-tips-forced>
      <template #aside-control>
        <AsideControl
          :class="{ 'is-off-line': control.store.isOffline }"
          :title="$t('HVN.Alarm.Title.Text')"
          actived
          @change="goToAlarmList"
        />
      </template>
      <view class="HVN-content">
        <!--音量区域-->
        <view class="topVolume" :class="{ 'is-off-line': control.store.isOffline }">
          <view class="set-text text-margin">音量</view>
          <view class="volume-content">
            <!-- <image class="volume-image" :src="volumeSrc"></image> -->
            <image
              class="volume-image"
              src="/pages/appliance/static/HVN/ic_volume_2.png"
              mode="aspectFit"
              v-if="control.store.$state.volume == 0"
            ></image>
            <image
              class="volume-image"
              mode="aspectFit"
              src="/pages/appliance/static/HVN/ic_volume_1.png"
              v-else
            ></image>
            <slider
              class="slider-view"
              active-color="#408df2"
              background-color="#e9e9ed"
              :min="control.store.$state.volume_min"
              :max="control.store.$state.volume_max"
              :value="control.store.$state.volume"
              @change="onSliderChange"
              block-size="18"
              block-color="#408DF2"
            ></slider>
          </view>
        </view>
        <!--推荐技能-->
        <view class="skill">
          <!--推荐技能 top-->
          <view class="top">
            <view class="set-text">推荐技能</view>
            <view class="all">
              <TrackButton track-id="HVN.Detail.ToAll.Button.Text" :type="TrackType.ApplianceDetail">
                <view class="all-text" @click="toAll">{{ $t('HVN.Detail.ToAll.Button.Text') }}</view>
              </TrackButton>
              <image class="arrow" src="/pages/appliance/static/HVN/ic_toAll.png"></image>
            </view>
          </view>
        </view>
        <!--推荐技能 内容区-->
        <view class="skill-list">
          <HVNSkill
            class="skill-cell"
            v-for="(skill, index) in skillData"
            :key="skill.id"
            :title="skill.skillContext"
            :desc="skill.skillTitle"
            :cellHeight="120"
            :showButton="true"
            :id="skill.id"
            :skillCatelog="skill.skillCatelog"
            @refresh:model="refresh"
            :index="index"
          ></HVNSkill>
        </view>
      </view>
    </SimpleControl>
  </view>
</template>
<script setup lang="ts">
import SimpleControl from '@/pages/appliance/view/control/simpleControl.vue'
import type { BaseController } from '@/controller/BaseAppliance/definition'
import { createHVNControl } from '@/controller/HVN'
import AsideControl from '../view/control/components/AsideControl.vue'
import { showLoading } from '@/utils/mpHelper'
import { onLoad } from '@dcloudio/uni-app'
import { HVN_SETTING_DA_VOLUME } from '@/constants/Command'
import { getSkillListLight } from '@/api/hvn'
import type { SkillModel } from '@/api/hvn'
import HVNSkill from '../components/hvnSkill.vue'
import { TrackType, trackEvent } from '@/dataReport/tracks'
import TrackButton from '@/dataReport/components/TrackButton.vue'

let control = createHVNControl()
const volumeSrc = ref('/pages/appliance/static/HVN/ic_volume_1.png')
const skillData = ref<SkillModel[]>([])

onLoad((options) => {
  getSkillListLightRequest()
})

type params = {
  model: SkillModel
  index: number
}

watch(
  () => volumeSrc.value,
  () => getVolumeImage()
)

function getVolumeImage() {
  if (control.store.$state.volume === 0) {
    volumeSrc.value = '/pages/appliance/static/HVN/ic_volume_2.png'
  } else {
    volumeSrc.value = '/pages/appliance/static/HVN/ic_volume_1.png'
  }
}
/**
 * 随机获取三条语音
 */
async function getSkillListLightRequest() {
  let res = await getSkillListLight()
  skillData.value = res.data || []
}

/**
 * 刷新一条数据
 * @param model
 */
function refresh(model: params) {
  skillData.value.splice(model.index, 1, model.model)
}

/**
 * 控制音量
 * @param e
 */
async function onSliderChange(e: WechatMiniprogram.SliderChanging) {
  let res: any = null
  try {
    res = await showLoading(() => control.remote.setSettingBySettings(HVN_SETTING_DA_VOLUME, e.detail.value)).then(
      () => {
        control.store.$state.volume = e.detail.value
      }
    )
  } catch (error) {
    res = error
  } finally {
    trackEvent(
      'appliance_setting',
      {
        setting_key: HVN_SETTING_DA_VOLUME,
        setting_value: e.detail.value,
        successOrNot: res.code == 0,
        error_code: res.code,
        response_msg: res.msg,
      },
      TrackType.ApplianceDetail,
      'HVN.Detail.Parameter.Setting'
    )
  }
}

function goToAlarmList() {
  let haId = control.store._datasource.haId
  uni.navigateTo({
    url: '/pages/appliance/HVN/AlarmClock/AlarmClock?haId=' + haId,
  })
}

/**
 * 去全部页面
 */
function toAll() {
  let haId = control.store._datasource.haId
  uni.navigateTo({
    url: '/pages/appliance/HVN/AlarmSkill/AlarmSkill?haId=' + haId,
  })
}
</script>

<style lang="less">
.hvn {
  .is-off-line {
    pointer-events: none;
    opacity: 0.6;
  }
  .notify-text {
    text-align: center;
  }
  .text-margin {
    margin: 32rpx;
    margin-bottom: 24rpx;
  }
  .set-text {
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 32rpx;
    /* Primary/Petrol */
    color: #2d3746;
  }

  .volume-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 158rpx;
    background: #f4f4f6;
    margin-left: 32rpx;
    margin-right: 32rpx;
    .volume-image {
      width: 48rpx;
      height: 48rpx;
      margin-left: 32rpx;
    }
    .slider-view {
      margin-right: 32rpx;
      margin-left: 24rpx;
      width: 100%;
      .wx-slider-handle-wrapper {
        height: 12rpx;
        border-radius: 0;
      }
    }
  }

  .skill {
    margin: 64rpx 32rpx 24rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .top {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .all {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .all-text {
          font-family: 'PingFang SC';
          font-style: normal;
          font-weight: 400;
          font-size: 24rpx;
          /* Primary/Petrol */
          color: #2d3746;
          opacity: 0.6;
        }
        .arrow {
          width: 16rpx;
          height: 32rpx;
          margin-left: 8rpx;
        }
      }
    }
  }

  .skill-list {
    margin: 24rpx 32rpx;
    margin-top: 0rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .skill-cell {
      margin-bottom: 24rpx;
      height: 120rpx;
      width: 100%;
    }
  }
}
</style>
